<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="app-content">
            <div class="mb-6 flex justify-between items-center">
                <div>
                    <h1 class="app-title">你好，学习者</h1>
                    <p class="text-gray-500">今天是学习的好日子！</p>
                </div>
                <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            
            <!-- 每日进度 -->
            <div class="card mb-6 fade-in">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="font-semibold text-lg">今日学习目标</h2>
                    <span class="badge badge-primary">
                        <span data-bind="progress.streak"></span>天连续学习
                    </span>
                </div>
                
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 64%"></div>
                </div>
                
                <div class="flex justify-between text-sm text-gray-500 mt-1">
                    <span>已学习<span class="font-medium text-gray-700 ml-1" data-bind="progress.dailyLearned"></span>个单词</span>
                    <span>目标<span class="font-medium text-gray-700 ml-1" data-bind="progress.dailyGoal"></span>个单词</span>
                </div>
                
                <div class="mt-4 grid grid-cols-2 gap-3">
                    <a href="learning.html" class="btn btn-primary text-center">
                        <i class="fas fa-play mr-2"></i>继续学习
                    </a>
                    <a href="review.html" class="btn btn-secondary text-center">
                        <i class="fas fa-sync mr-2"></i>开始复习
                    </a>
                </div>
            </div>
            
            <!-- 学习统计 -->
            <div class="card mb-6 slide-up">
                <h2 class="font-semibold text-lg mb-4">学习统计</h2>
                
                <div class="grid grid-cols-3 gap-2 mb-4">
                    <div class="text-center p-2">
                        <div class="text-2xl font-bold text-gray-800" data-bind="progress.learnedWords"></div>
                        <div class="text-xs text-gray-500">已学习</div>
                    </div>
                    <div class="text-center p-2">
                        <div class="text-2xl font-bold text-gray-800" data-bind="progress.reviewedWords"></div>
                        <div class="text-xs text-gray-500">已复习</div>
                    </div>
                    <div class="text-center p-2">
                        <div class="text-2xl font-bold text-gray-800" data-bind="progress.masteredWords"></div>
                        <div class="text-xs text-gray-500">已掌握</div>
                    </div>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-3">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="text-sm font-medium text-gray-700">过去7天</h3>
                        <a href="progress.html" class="text-xs text-blue-500">查看详情</a>
                    </div>
                    
                    <div class="flex items-end h-20 justify-between">
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 40%"></div>
                            <div class="text-xs text-gray-500 mt-1">一</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 56%"></div>
                            <div class="text-xs text-gray-500 mt-1">二</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 84%"></div>
                            <div class="text-xs text-gray-500 mt-1">三</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 60%"></div>
                            <div class="text-xs text-gray-500 mt-1">四</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 50%"></div>
                            <div class="text-xs text-gray-500 mt-1">五</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 64%"></div>
                            <div class="text-xs text-gray-500 mt-1">六</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-6 rounded-t" style="height: 30%"></div>
                            <div class="text-xs text-gray-500 mt-1">日</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 推荐词库 -->
            <div class="mb-4 flex justify-between items-center">
                <h2 class="font-semibold text-lg">推荐词库</h2>
                <a href="wordbooks.html" class="text-sm text-blue-500">查看全部</a>
            </div>
            
            <div class="space-y-3 slide-up">
                <div class="card p-4 flex">
                    <div class="list-item-icon text-lg">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex justify-between">
                            <h3 class="font-medium text-gray-800">雅思核心词汇</h3>
                            <span class="text-xs text-gray-500">3000词</span>
                        </div>
                        <p class="text-sm text-gray-500 mb-2">雅思考试必备的3000个核心词汇</p>
                        <div class="progress-bar h-1.5">
                            <div class="progress-fill" style="width: 65%"></div>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <span class="text-xs text-gray-500">65% 已学习</span>
                            <a href="learning.html" class="text-xs text-blue-500">继续学习</a>
                        </div>
                    </div>
                </div>
                
                <div class="card p-4 flex">
                    <div class="list-item-icon text-lg">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex justify-between">
                            <h3 class="font-medium text-gray-800">商务英语词汇</h3>
                            <span class="text-xs text-gray-500">2500词</span>
                        </div>
                        <p class="text-sm text-gray-500 mb-2">职场和商务环境中常用的英语词汇</p>
                        <div class="progress-bar h-1.5">
                            <div class="progress-fill" style="width: 42%"></div>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <span class="text-xs text-gray-500">42% 已学习</span>
                            <a href="learning.html" class="text-xs text-blue-500">继续学习</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 今日单词 -->
            <div class="mb-4 mt-6 flex justify-between items-center">
                <h2 class="font-semibold text-lg">今日单词</h2>
                <a href="#" class="text-sm text-blue-500">重新生成</a>
            </div>
            
            <div class="word-card">
                <div class="flex justify-between items-center mb-1">
                    <span class="badge badge-primary">高级</span>
                    <button class="text-gray-400">
                        <i class="fas fa-volume-up text-lg"></i>
                    </button>
                </div>
                
                <h3 class="word-term">serendipity</h3>
                <div class="word-phonetic">/ˌser.ənˈdɪp.ə.ti/</div>
                
                <div class="word-definition">
                    the fact of finding interesting or valuable things by chance
                </div>
                
                <div class="word-example">
                    They found each other by serendipity.
                </div>
                
                <div class="mt-5 flex justify-end space-x-3">
                    <button class="btn btn-secondary text-sm py-2 px-4">
                        <i class="fas fa-check mr-1"></i>已掌握
                    </button>
                    <button class="btn btn-primary text-sm py-2 px-4">
                        <i class="fas fa-plus mr-1"></i>添加到收藏
                    </button>
                </div>
            </div>
        </div>
        
        <div class="navbar"></div>
    </div>
    
    <script src="../js/main.js"></script>
</body>
</html> 